import { reactive, onMounted, onBeforeUnmount } from "vue"; // ref处理基本类型数据  reactive处理引用类型数据

function savePoint() {
  // 实现鼠标'打点'相关的数据
  let point = reactive({
    x: 0,
    y: 0
  })

  // 实现鼠标'打点'相关的生命周期钩子
  function savePoint(event) {
    // console.log(event.pageX, event.pageY)
    point.x = event.pageX
    point.y = event.pageY
  }

  onMounted(() => {
    window.addEventListener('click', savePoint)
  })

  onBeforeUnmount(() => {
    window.removeEventListener('click', savePoint)
  })

  return point
}

export default savePoint

// hook本质是一个函数,把setup函数中使用的Composition API进行了封装，类似于vue2中的mixin
// Composition API： ref,reactive,onMounted,onBeforeUnmount...
// 自定义hook的优势：复用代码,让setup中的逻辑更清楚易懂